<template>
	<view class="container">
		<u-form label-position="left" label-width="auto" :model="vipForm">
			<view class="wd-form-wrapper">
				<u-form-item label="会员卡名称" prop="name">
					<u-input type="text" :disabled="true" v-model="vipForm.vip.name"></u-input>
				</u-form-item>
				<u-form-item label="卡号" prop="number">
					<u-input type="text" :disabled="true" v-model="vipForm.card_no"></u-input>
				</u-form-item>
			
				<!-- <u-form-item label="发卡日期" prop="hairpinDate" class="disabled">
					<u-input type="text" :disabled="true" v-model="vipForm.createtime_text"></u-input>
				</u-form-item> -->
				<u-form-item label="发卡日期" prop="createtime_text" right-icon="arrow-right" :right-icon-style="{color:'#D7D7D7',fontSize:'24rpx'}">
					<u-input type="select" placeholder="请选择" :placeholder-style="{color: '#999999'}" :clearable="false" :disabled="true" v-model="vipForm.createtime_text" @click="dateCreateShow=true"></u-input>
				</u-form-item>
				<u-form-item label="开卡日期" prop="activation_time_text" right-icon="arrow-right" :right-icon-style="{color:'#D7D7D7',fontSize:'24rpx'}">
					<u-input type="select" placeholder="请选择" :placeholder-style="{color: '#999999'}" :clearable="false" :disabled="true" v-model="vipForm.activation_time_text" @click="dateOpenShow=true"></u-input>
				</u-form-item>
				<u-form-item label="有效期至" prop="expire_in_text" right-icon="arrow-right" :right-icon-style="{color:'#D7D7D7',fontSize:'24rpx'}">
					<u-input type="select" placeholder="请选择" :placeholder-style="{color: '#999999'}" :clearable="false" :disabled="true" v-model="vipForm.expire_in_text" @click="dateShow=true"></u-input>
				</u-form-item>
				
				<u-form-item label="卡次" prop="balance" v-if="vipForm.type == 2">
					<u-input type="text" v-model="vipForm.value"></u-input>
				</u-form-item>
			</view>
			<view class="wd-form-wrapper">
				<u-form-item label="备注"></u-form-item>
				<u-form-item prop="remarks">
					<u-input type="textarea" :disabled="false" v-model="vipForm.remarks"></u-input>
				</u-form-item>
			</view>
			<u-calendar mode="date" toolTip="请选择开卡日期" max-date="2099-12-31"  v-model="dateOpenShow" @change="dateOpenChange"></u-calendar>
			<u-calendar mode="date" toolTip="请选择有效期" max-date="2099-12-31" v-model="dateShow" @change="dateChange"></u-calendar>
			
		
			<view class="wd-form-footer">
				<view class="wd-form-footer__btn">
					<u-button :custom-style="wd_button_primary" shape="circle" :ripple="true" @click="submit">保存</u-button>
				</view>
			</view>
		</u-form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user_card_id:0,
				vipForm: {},
				dateToday: '',
				dateShow: false,
				dateOpenShow:false,
				dateCreateShow:false,
			}
		},
		onReady() {
		
			//this.dateToday = this.$u.timeFormat(new Date(), 'yyyy-mm-dd');
		},
		onLoad(options){
			if(options.user_card_id){
				this.user_card_id = options.user_card_id;
				this.FetchCardDetail();
			}
		},
		methods: {
			FetchCardDetail(){
				var that = this;
				var user_vip_id = that.user_card_id;
				if(!user_vip_id){
					uni.showToast({title:'会员参数信息错误',icon:'none'});
					return false;
				}
				that.$core.get({url:'fitness.manage/vip_info',data:{user_vip_id: user_vip_id},success:(ret)=>{
					that.vipForm = ret.data;
				}});
			},
			//开卡日期
			dateOpenChange(e) {
				this.vipForm.open_time_text = e.result
			},
			// 请选择有效期
			dateChange(e) {
				this.vipForm.expire_in_text = e.result
			},
			
			submit() {
				var that = this;
				var user_card_id = that.user_card_id;
				if(!user_card_id){
					uni.showToast({title:'会员卡ID错误',icon: 'none'});
					return false;
				}
				var formData = that.vipForm;
				var expire_in = formData.activition_status == '1'?formData.expire_in_text:'';
				that.$core.post({url:'fitness.manage/edit_user_vip',data: {user_vip_id: user_card_id,value: formData.value,activation_time: formData.activation_time_text,expire_in:expire_in,remarks: formData.remarks},success:(ret)=>{
					uni.showToast({
						title:'保存成功',
					})
					
				}});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 1rpx 0;
		background: #F6F6F6;
	}
</style>